<script setup lang="ts">
import { ref, toRefs } from "vue"
import { mattingApi, downloadApi, combineApi } from "../../api/user"
const _window = window as any
const url = ref("src/assets/sg.png")
const titleUrl = ref("src/assets/logo.png")
const mattingUrl = ref("")
const fileId = ref(null)
const showPopover = ref(true)
const actions = [
    { color: "#FF0000", text: "红色" },
    { color: "#0000FF", text: "蓝色" },
    { color: "#A020F0", text: "紫色" },
    { color: "#000000", text: "黑色" },
    { color: "#8B8989", text: "灰色" },
    { color: "#63B8FF", text: "天蓝色" }
]

const mattingfile = ref(null)
const downloadFile = ref(null)
const curColor = ref("#ffffff")

/**
 * 用户选择颜色，更新文件
 */
const selectColorH5 = (color: string) => {
    curColor.value = color
    showPopover.value = false
    combineApi({ file_id: fileId.value, color: curColor.value }).then((response: any) => {
        downloadFile.value = response.file_id
        mattingfile.value = response.file_id
        updateMatting()
    })
}

/**
 * 图片base64转file对象
 */
const getFileObj = (imageBase64: string) => {
    const mime = "image/png"
    const filename = "image.png"
    const bstr = window.atob(imageBase64)
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }

    const blob = new Blob([u8arr], { type: mime })
    const file = new File([blob], filename, { type: mime })
    return file
}

/**
 * 安卓获取图片回调
 */
_window.AndroidCallback = (image_string: string) => {
    const file = getFileObj(image_string)
    androidUpload(file)
}

/**
 * 安卓保存图片到相册
 */
function dwonloadImage() {
    downloadApi({ file_id: downloadFile.value }).then((response: any) => {
        const filecontent: Blob = response
        const reader = new FileReader()
        reader.readAsDataURL(filecontent)
        reader.onload = function () {
            const base64String = reader.result
            console.log(base64String)
            _window.Android.savePicture(base64String)
        }
    })
}

/**
 * 安卓回调图片后的页面渲染
 */
function androidUpload(file: File) {
    url.value = URL.createObjectURL(file)
    let formData = new FormData()
    formData.append("file", file)
    mattingApi(formData).then((response: any) => {
        console.log("🚀 ~ mattingApi ~ response:", response)
        fileId.value = response.file_id
        mattingfile.value = response.file_id
        downloadFile.value = response.file_id
        updateMatting()
    })
}

//上传逻辑
function upload() {
    _window.Android.getPicture()
}


// 更新图片
function updateMatting() {
    downloadApi({ file_id: mattingfile.value }).then((response: any) => {
        mattingUrl.value = URL.createObjectURL(response)
    })
}
</script>

<template>
    <div class="full-screen">
        <div class="base-header">
            <div class="header-container">
                <img style="width: 30px; height: 30px; margin-top: 10px; margin-left: 20px" :src="titleUrl" />
                <h1 class="header-title">AI登记照更换背景--免费</h1>
                <div style="margin-left: 54%; margin-top: 15px">
                    <van-popover v-model:show="showPopover" v-show="mattingfile != null">
                        <van-grid square clickable :border="false" column-num="3" style="width: 240px">
                            <van-grid-item v-for="item in actions" :key="item.color" @click="selectColorH5(item.color)" v-show="mattingfile != null">
                                <template #default="scope">
                                    <div class="color-item" :style="{ backgroundColor: item.color }">
                                        <h1>{{ item.text }}</h1>
                                    </div>
                                </template>
                            </van-grid-item>
                        </van-grid>
                        <template #reference>
                            <van-button size="mini" type="primary" v-show="mattingfile != null">颜色选择</van-button>
                        </template>
                    </van-popover>
                </div>
            </div>
        </div>
        <div class="base-body">
            <div class="base-show">
                <div class="base-upload">
                    <van-image class="image-container" :src="url" fit="fit" />
                    <van-button type="primary" size="mini" @click="upload">上传图片</van-button>
                </div>
                <div class="base-matting">
                    <van-image class="image-container" :src="mattingUrl" fit="fit" v-show="mattingfile != null"></van-image>
                    <van-button size="mini" type="primary" v-show="mattingfile != null" @click="dwonloadImage">下载图片</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: #f5f5f5;
}

.base-header {
    height: 8%;
}

.base-body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 94%;
}

.base-show {
    display: flex;
    justify-content: space-around;
    width: 100vw;
    margin: 10px;
    border-radius: 10px;
}

.base-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-radius: 10px;
    width: 50%;
    background-color: #ffffff;
}

.base-matting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-radius: 10px;
    width: 50%;
    background-color: #ffffff;
}

.image-container {
    width: 190px;
    height: 266px;
    margin-bottom: 15px;
    background-color: v-bind(curColor);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: start;
}

.header-title {
    font-size: small;
    font-weight: bolder;
    margin-left: 10px;
    margin-top: 10px;
}

.color-item {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-size: small;
    border: 2px solid #ffffff;
    box-shadow: darkgrey 2px 2px 10px 4px;
}
</style>
